<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-12-11 10:09:37
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2025-02-20 11:43:06
 * @FilePath: \hbzc-groupmeal-center-web\src\centerViews\basicInformation\spuManage\spuInformation\index.vue
-->
<template>
  <div class="app-container flex flex-col">
    <!-- 查询区 -->
    <searchCard @onSearch="searchFn" @onReset="resetFn">
      <el-form :model="spuForm" label-width="auto" inline @keyup.enter="searchFn">
        <el-form-item label="SPU名称：">
          <pb-input v-model="spuForm.spuName" placeholder="请输入SPU名称、别名"></pb-input>
        </el-form-item>
        <el-form-item label="SPU编码：">
          <pb-input v-model="spuForm.spuCode" placeholder="请输入SPU编码"></pb-input>
        </el-form-item>
        <el-form-item label="营养匹配：">
          <pb-check :list="matchList" @change="changeCheck($event)"></pb-check>
        </el-form-item>
        <el-form-item label="菜谱使用中：">
          <pb-check :list="recipeList" @change="recipeChangeCheck($event)"></pb-check>
        </el-form-item>
      </el-form>
    </searchCard>

    <!-- 表格区 -->
    <div class="flex-1">
      <pb-card padding="0" height="100%">
        <div class="content-box">
          <ContentOperation v-hasPerm="'center:spu:add'">
            <pb-button size="small" plain class="mr-6" @click="addModifFn">
              +添加
            </pb-button>
            <pb-button size="small" plain v-hasPerm="'center:spu:export'">导出</pb-button>
          </ContentOperation>
          <div class="table-box flex">
            <div class="left-tree-box">
              <pb-tree :style="{ maxHeight: treeH }" @nodeClick="nodeClick" class="custom-tree " :treeData="spuTreeData"
                :defaultProps="treeProps"></pb-tree>
            </div>
            <div class="table-right ">
              <pb-table :column="spuColumn" :tableData="spuTableData" :bottomElement="['pb-page']">
                <template #spuAlias="{ row }">
                  <div class=" flex justify-center ">

                    <el-popover placement="top" effect="dark" :width="140" trigger="hover" :content="row.spuAlias">
                      <template #reference>
                        <div class="popContent pb-ellipsis">
                          {{ showDishedINfo(row.spuAlias) }}
                        </div>
                      </template>
                    </el-popover>

                  </div>
                </template>
                <template #dataSource="{ row }">
                  <span>{{ row.isSystemData ? '内置' : '项目' }}</span>
                </template>
                <template #operate="{ row }">
                  <div class="flex">
                    <div v-hasPerm="'center:spu:match'">
                      <pb-button size="small" text @click="openMatch(row)">匹配SKU</pb-button>
                      <p class="divider mr-2 ml-2"></p>
                    </div>
                    <pb-button size="small" text @click="editModifFn(row)" v-hasPerm="'center:spu:edit'">
                      编辑
                    </pb-button>
                  </div>
                </template>
              </pb-table>
              <pb-pagination v-model:currentPage="pages.currentPage" v-model:pageSize="pages.pageSize"
                @onChange="onPagesChange" :total="pages.total"></pb-pagination>
            </div>
          </div>
        </div>
      </pb-card>
    </div>

    <!-- 添加修改弹窗 -->
    <addModifPop ref="addPopRef" @refresh="resetFn"></addModifPop>

    <!-- 匹配SKU弹窗 -->
    <matchSku ref="matchPopRef"></matchSku>

  </div>
</template>

<script setup lang="ts">
import addModifPop from "./components/addModifPop.vue";
import matchSku from "./components/matchSku.vue";
import { getSpuClassTreeApi } from "@/utils/globalFn";
import { getSpuInfoList } from "@/api/Spu";

const spuTableData = ref([]);
const spuColumn = reactive([
  {
    key: "spuCode",
    width: 120,
    name: "SPU编码",
    align: 'right',
  },
  {
    key: "spuClassName",
    width: 100,
    name: "SPU类别",
  },
  {
    key: "commonlyName",
    width: 120,
    name: "常用名",
  },

  {
    key: "spuName",
    name: "SPU名称",
  },
  {
    slot: "spuAlias",
    width: 140,
    name: "别名",
  },
  {
    key: "fctName",
    width: 120,
    name: "营养匹配",
  },
  {
    slot: "dataSource",
    name: "数据来源",
  },
  {
    slot: "operate",
    name: "操作",
    fixed: 'right',
    width: 200,
  },
]);

const formOrigin = () => ({
  spuName: "",
  spuCode: "",
  fctMatch: "",
  dishUsing: ""
});
let spuForm = ref(formOrigin());

const matchOrigin = () => [
  { label: "全部", val: "", checked: true },
  { label: "未匹配", val: 0, checked: false },
  { label: "已匹配", val: 1, checked: false },
];
const recipeOrigin = () => [
  { label: "全部", val: "", checked: true },
  { label: "未使用", val: 0, checked: false },
  { label: "使用中", val: 1, checked: false },
];
const matchList = ref(matchOrigin());
const recipeList = ref(recipeOrigin())
const changeCheck = (event) => {
  spuForm.value.fctMatch = event.val
  getSpuInfoListApi();
};
const recipeChangeCheck = (event) => {
  spuForm.value.dishUsing = event.val
  getSpuInfoListApi();
};

const pageInit = () => ({
  currentPage: 1,
  pageSize: 15,
  total: 0,
});
const pages = ref(pageInit());

let spuTreeData = ref([]);
const treeProps = { children: "children", label: "spuClassName" };

const searchFn = () => {
  pages.value.currentPage = 1
  getSpuInfoListApi();
};

const resetFn = () => {
  pages.value.currentPage = 1;
  spuForm.value = formOrigin();
  matchList.value = matchOrigin();
  getSpuInfoListApi();
};

const addPopRef = ref(null);
// 添加打开弹窗
const addModifFn = () => {
  let code = curNode.value.spuClassLevel == 2 ? curNode.value.spuClassCode : null
  addPopRef.value.showFn({ code });
};
const editModifFn = (row) => {
  addPopRef.value.showFn({ info: JSON.parse(JSON.stringify(row)) });
};

const matchPopRef = ref(null)
const openMatch = (row) => {
  let { spuCode, spuName } = { ...row }
  matchPopRef.value.showFn({ spuCode, spuName })
}


const onPagesChange = () => {
  getSpuInfoListApi();
};

// 选择节点
const curNode = ref("");
const nodeClick = (data) => {
  curNode.value = data.curNode;
  pages.value.currentPage = 1;
  getSpuInfoListApi();
};

// 获取spu信息列表
const getSpuInfoListApi = () => {
  return new Promise<void>((resolve, reject) => {
    let { currentPage, pageSize } = { ...pages.value };
    let params = {
      currentPage,
      pageSize,
      spuClassCode: curNode.value.spuClassCode,
      ...spuForm.value,
    };
    getSpuInfoList(params).then((res) => {
      if (res.code == 2000) {
        spuTableData.value = res.data.records;
        pages.value.total = res.data.total;
      }
    });
  });
};

const showDishedINfo = (val) => {
  if (val) {
    let str = val.split('、').splice(0, 3).join(',')
    return str
  } else {
    return ''
  }
}

const treeH = ref(null);
onMounted(() => {
  getSpuClassTreeApi().then((res) => {
    spuTreeData.value = [
      {
        spuClassName: '全部',
        children: res
      }
    ];
    getSpuInfoListApi();
    var height = document.getElementsByClassName("pb-table");
    treeH.value = height[0].offsetHeight + "px";

    window.addEventListener("resize", () => {
      height = document.getElementsByClassName("pb-table");
      treeH.value = height[0].offsetHeight + "px";
    });
  });
});
</script>

<style lang="scss" scoped>
.popContent {
  width: 100%;
  overflow: hidden;
}

.content-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.table-box {
  flex: 1;

  .table-right {
    width: 84%;
    padding: 16px;
    box-sizing: border-box;
  }
}
</style>